<template>
  <div class="page">
    <div class="top">
      <!-- <el-button type="primary">导入excel</el-button> -->
      <el-upload
        class="diy-uploadBtn"
        :action="uploadExcelAjax.config.url"
        :headers="uploadExcelAjax.config.headers"
        name="file"
        :data="uploadExcelAjax.config.data"
        ref="uploadImg"
        accept=".xlsx, .xls"
        :show-file-list="false"
        :on-success="uploadExcelSuc"
        :on-error="uploadExcelFail"
        :before-upload="uploadExcelBefore"
      >
        <el-button type="primary">导入Excel</el-button>
      </el-upload>
      <el-button type="primary" @click="rAddFrom">新增</el-button>
    </div>
    <div class="form">
      <el-form ref="form" :model="pageAjax.data" inline>
        <template v-for="(item, index) in pageAjax.data.list">
          <div :key="index" class="list">
            <el-button type="danger" @click="rDelFrom(index)"
              >删除<i class="el-icon-delete el-icon--right"></i></el-button
            ><br /><br />
            <el-form-item
              label="主播号："
              :prop="'list.' + index + '.anchorNo'"
              :rules="{
                required: true,
                message: '主播号不能为空',
                trigger: 'blur'
              }"
            >
              <el-input
                v-model="item.anchorNo"
                @blur="rGetNickname(index)"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="主播昵称："
              :prop="'list.' + index + '.anchorNick'"
              :rules="{
                required: true,
                message: '主播昵称不能为空，你需要关联到具体主播',
                trigger: 'blur'
              }"
            >
              <el-input v-model="item.anchorNick" disabled></el-input>
            </el-form-item>
            <el-form-item
              label="选择直播平台："
              :prop="'list.' + index + '.platform'"
              :rules="{
                required: true,
                message: '平台不能为空',
                trigger: 'blur'
              }"
            >
              <el-select
                v-model="item.platform"
                placeholder="选择直播平台"
                @change="rGetNickname(index)"
              >
                <el-option
                  v-for="item in biPlatformList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="发放月份："
              :prop="'list.' + index + '.provideMonth'"
              :rules="{
                required: true,
                message: '发放月份不能为空',
                trigger: 'blur'
              }"
            >
              <el-date-picker
                v-model="item.provideMonth"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择月"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="备案金额："
              :prop="'list.' + index + '.recordAmount'"
              :rules="{
                required: true,
                message: '主播号不能为空',
                trigger: 'blur'
              }"
            >
              <el-input v-model="item.recordAmount"></el-input>
            </el-form-item>
            <el-form-item
              label="实际发放："
              :prop="'list.' + index + '.actualAmount'"
              :rules="{
                required: true,
                message: '实际发放不能为空',
                trigger: 'blur'
              }"
            >
              <el-input v-model="item.actualAmount"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input v-model="item.remark"></el-input>
            </el-form-item>
          </div>
        </template>
      </el-form>
      <div class="footer" v-if="pageAjax.data.list.length">
        <el-button type="primary" @click="rSubmitForm('form')">提 交</el-button>
        <el-button @click="rCancel">取 消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { addOrUpdateSalary, getAnchorByNo } from "@/api/finance";
// import _ from "lodash";
const currentCorporation = JSON.parse(
  localStorage.getItem("currentCorporation")
);

export default {
  props: {
    biPlatformList: {
      type: Array
    }
  },
  data() {
    return {
      pageAjax: {
        data: {
          list: []
        }
      },
      uploadExcelAjax: {
        loading: false,
        config: {
          disabled: false,
          headers: {},
          data: {
            tenantId: currentCorporation.id
          },
          url: "/bs/basic/salary/importSalaryExcel"
        }
      }
    };
  },
  created() {
    let sid = localStorage.getItem("sid")
      ? JSON.parse(localStorage.getItem("sid"))
      : {};
    this.uploadExcelAjax.config.headers["Authorization"] =
      "bearer " + sid.access_token;
    // this.addFrom();
  },
  methods: {
    uploadExcelSuc(respData) {
      let _that = this;
      _that.uploadExcelAjax.loading.close();
      if (respData.code === this.STATUS.success[0]) {
        // this.excelPath.push(respData.data.fileUrl);
        _that.pageAjax.data.list = this.pageAjax.data.list.concat(
          respData.data
        );
      } else {
        _that.$message.error({
          message: respData.msg || "上传失败"
        });
      }
    },

    uploadExcelFail() {
      let _that = this;
      _that.uploadExcelAjax.loading.close();
      _that.uploadExcelAjax.config.disabled = false;
      _that.$message.error({
        message: "上传错误，请查看网络或联系管理员",
        onClose() {}
      });
    },
    uploadExcelBefore(file) {
      this.uploadExcelAjax.loading = this.$loading({
        text: "上传中。。。",
        lock: true
      });
      // this.upLoadData.key = "2020-04-21/" + file.name;
    },
    rGetNickname(index) {
      let _that = this;
      let data = _that.pageAjax.data.list[index];
      if (!data.platform || !data.anchorNo) {
        return;
      }
      getAnchorByNo({ params: data }).then(resp => {
        let respData = resp.data || {};

        if (respData.code === _that.STATUS.success[0]) {
          _that.pageAjax.data.list[index].anchorNick = "";
          if (respData.data && respData.data.anchorNick) {
            _that.pageAjax.data.list[index].anchorNick =
              respData.data.anchorNick;
            _that.$message.success(respData.msg || "获取失败");
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        } else {
          _that.$message.error(respData.msg || "获取失败");
        }
      });
    },
    rAddFrom() {
      const data = {
        salaryType: "",
        anchorNick: "",
        anchorNo: "",
        createTime: "",
        // deptId: 0,
        // id: 0,
        platform: "",
        provideMonth: "",
        recordAmount: "",
        remark: ""
      };
      this.pageAjax.data.list.push(data);
    },
    rDelFrom(index) {
      this.pageAjax.data.list.splice(index, 1);
    },
    rSubmitForm(formName) {
      let _that = this;
      _that.$refs[formName].validate(valid => {
        if (valid) {
          const data = {
            basicSalaryVoList: _that.pageAjax.data.list
          };
          if (_that.pageAjax.data.loading) {
            return;
          }
          _that.pageAjax.data.loading = true;
          addOrUpdateSalary(data)
            .then(res => {
              if (res.data.code === _that.STATUS.success[0]) {
                _that.$message.success("提交成功");
                _that.rCancel();
              } else {
                _that.$message.error(res.data.msg);
              }
            })
            .finally(() => {
              _that.pageAjax.data.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    rCancel() {
      this.pageAjax.data.list = [];
      this.$emit("cancel");
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding-top: 60px;
  .top {
    height: 50px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .form {
    height: calc(100% - 60px);
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    overflow: auto;
    padding: 15px;
    box-sizing: border-box;
  }

  .diy-uploadBtn {
    display: inline-block;
    margin-right: 15px;
  }
}
</style>
<style lang="scss">
.page {
  .el-drawer__header {
    position: relative;
    z-index: 10;
  }
}
</style>
